<template>
  <div class="login-container">
    <el-form :model="ruleForm2" :rules="rules2"
            status-icon
            ref="ruleForm2" 
            label-position="left" 
            label-width="0px" class="demo-ruleForm">
        <!-- <h3 class="title">用户注册</h3> -->
        <el-form-item prop="phonenumber" label="设置账号:" label-width="100px">  
            <el-input type="text" 
                v-model="ruleForm2.phonenumber" 
                placeholder="手机号"
            ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="设置密码:" label-width="100px">
            <el-input type="password" 
                v-model="ruleForm2.password" 
                placeholder="设置密码"
                show-password=true
            ></el-input>
        </el-form-item>
        <el-form-item prop="repassword" label="确认密码:" label-width="100px">
            <el-input type="password" 
                v-model="ruleForm2.repassword" 
                placeholder="确认密码"
                show-password=true
            ></el-input>
        </el-form-item>
        <el-form-item prop="name" label="姓名:" label-width="100px"> 
            <el-input v-model="ruleForm2.name" placeholder="输入姓名"></el-input>   
            <!-- <el-radio 
                v-model="ruleForm2.sex" 
                placeholder="性别"
                label="1"
            >男</el-radio>
            <el-radio 
                v-model="ruleForm2.sex" 
                placeholder="性别"
                label="2"
            >女</el-radio> -->
        </el-form-item>

        <el-form-item style="width:100%;">
            <el-button type="primary" round style="width:100%;" @click="handleSubmit" :loading="logining">注册</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
 data(){
     var checkPassWord = (rule,value,callback) =>{
         if(!value){
             return callback(new Error('密码不能为空'));
         }else{
             callback()
         }
     }

     var reCheckPassWord = (rule,value,callback) =>{
         if(value!=this.ruleForm2.password){
             return callback(new Error('密码不一致'));
         }else{
             callback()
         }
     }

     var checkphoneNumber = (rule,value,callback) =>{
         axios.get("/member/queryByPhoneNumber?phoneNumber="+value)
         .then(res => {
             if(res.data){
                 return callback(new Error('该账号'+value+'已经存在'));
             }else{
                 callback()
             }             
         })
         .catch(err => {
             console.error(err); 
         })
     }
        return {
            // activeName: 'first',
            logining: false,
            ruleForm2: {
                phonenumber: '',
                password: '',
                repassword: '',
                name:'',
            },
            rules2: {
                phonenumber: [
                    {required: true, message: '不能为空', trigger: 'blur'},
                    {validator: checkphoneNumber, trigger: 'blur'},
                    {min:11,max:11,message:'手机号码为11位', trigger: 'blur'},
                    ],
                password: [
                    {required: true,min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'},
                    {validator:checkPassWord,trigger:'blur'},
                    ],
                repassword:[
                    {required: true, message: '不能为空', trigger: 'blur'},
                    {validator:reCheckPassWord,trigger:['change','blur']}
                ],
                name:[
                    {required: true, message: '请选输入姓名', trigger: 'blur'}
                ]
            },
            checked: false
        }
    },
    methods: {
        handleSubmit(){
            this.$refs['ruleForm2'].validate(valid=>{                
                if(valid){
                    axios.post("/member/addMember",{tMember:this.ruleForm2})
                    .then(res => {                        
                        // this.$router.push('/login')
                        this.$store.commit('editActiveName','first')
                        console.log(res.data)
                        this.ruleForm2=null
                        this.$message({
                            message: '注册成功！',
                            type: 'success'
                        });
                        // alert(this.$store.state.activeName)
                    })
                    .catch(err => {
                        this.$message({
                            message: '注册失败！',
                            type: 'error'
                        });
                        console.error(err); 
                    })
                }else{
                    this.$message({
                    message: '带*号的，不能为空',
                    type: 'warning'
                    });
                }
            })            
            
        }
    }
}
</script>

<style scoped>
.text_h2{
    margin: 0 auto;
    padding: 0 auto;
}
.left_text{
    text-align: left;
    margin-left: 100px;
}
.a{
    float: right;   
    color: blue;
    cursor: pointer;
}
.login-container {
    /* margin-top: 100px; */
    width: 100%;
    height: 80%;
    /* float: right; */
    /* margin: 0 auto; */
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
    float: left;
}
</style>